<template>
  <div>
    <a-row type="flex" align="middle" style="margin: 5px 0 20px 0;">
      <a-col :span="12">
        <div>
        <span>项目名称：</span>
        <div style="width: 60%; display: inline-block;">
          <a-select v-model="queryParam.subjectId" style="width: 100%" @change="subjectChange" placeholder="请选择项目名称">
            <a-select-option v-for="item in subjectDict" :key="item.subjectId" :value="item.subjectId">
              {{ item.subjectName }}
            </a-select-option>
          </a-select>
        </div>
        </div>
      </a-col>
       <a-col :span="12" style="text-align:right">
        <a-button type="primary" icon="info-circle" @click="searchDTPShareCompare">DTP份额对照</a-button>
       </a-col>
    </a-row>
  
  <a-table
    ref="table"
    size="middle"
    :scroll="{x:true}"
    bordered
    rowKey="id"
    :columns="columns"
    :dataSource="dtpData"
    :pagination="ipagination"
    :loading="loading"
    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
    class="j-table-force-nowrap"
    @change="handleTableChange">
      <template slot="title" slot-scope="currentPageData">
        <span style="font-size: 14px;">
          <span>{{ subjectName }}</span>
          <span style="margin-left:30px">DTP总份额：{{ totalShare }} <span style="margin-left:5px">预估每份DTP收益：{{
            totalEstimatePerShare }}</span></span>
        </span>
      </template>
      <span slot="incentiveTimeSlot" slot-scope="text, record">
        <span>
          {{ !record.incentiveBegin ? '' : record.incentiveBegin.length > 10 ? record.incentiveBegin.substr(0, 10) :
            record.incentiveBegin }}
        </span>
        <span>—</span>
        <span>
          {{ !record.incentiveEnd ? '' : record.incentiveEnd.length > 10 ? record.incentiveEnd.substr(0, 10) :
            record.incentiveEnd }}
        </span>
      </span>
      <span slot="dtpShareTitleSlot">
        DTP份额(份)
      </span>
      <span slot="estimatePerShareTitleSlot">
        预估每份DTP收益(元){{ estimatePerShare }}
      </span>
      <span slot="remarkSlot" slot-scope="text, record">
        <j-ellipsis :value="text" :length="10"></j-ellipsis>
      </span>
      <!-- <template slot="footer">
          <div style="text-align: right;">
            <span>总份额:</span><span>{{ totalShare }}份</span> 
          </div>
        </template> -->
    </a-table>
    <hr-dtp-share-compare-list-modal ref="modalForm" @ok="modalFormOk"></hr-dtp-share-compare-list-modal>
  </div>
</template>
<script>
import { mixinDevice } from '@/utils/mixin'
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import moment from 'moment'
import HrDtpShareCompareListModal from './HrDtpShareCompareListModal.vue'
export default {
  components: {HrDtpShareCompareListModal},
  name: 'DtpList',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      loading: false,
      disableMixinCreated: true,
      totalShare: '', //DTP总份额
      totalRewardAmount: '', //预估奖金金额
      totalEstimatePerShare: '', //预估每份DTP收益
      queryParam: {
         subjectId:''
      },
      columns: [
        {
          title: '激励周期',
          align: 'center',
          dataIndex: 'incentiveBegin',
          scopedSlots: { customRender: 'incentiveTimeSlot' },
        },
        // {
        //   title: '年份',
        //   align: 'center',
        //   dataIndex: 'year',
        //   customRender: function (text) {
        //     return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
        //   },
        // },
        {
          title: '核算周期',
          align: 'center',
          dataIndex: 'month',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
        },
        {
          title: '职级',
          align: 'center',
          dataIndex: 'postLevel_dictText',
        },
        {
          title: 'DTP类型',
          align: 'center',
          dataIndex: 'dtpType_dictText',
        },
        {
          align: 'center',
          dataIndex: 'dtpShare',
          slots: { title: 'dtpShareTitleSlot' },
        },
        // {
        //   align: 'center',
        //   dataIndex: 'estimatePerShare',
        //   slots: { title: 'estimatePerShareTitleSlot' },
        // },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remarkSlot' },
        },
      ],
      dtpData: [],
      totalShare: '', //DTP总份额
      estimatePerShare: '', //预估每份DTP收益
      realName: Vue.ls.get(USER_INFO).username ? Vue.ls.get(USER_INFO).username : '',
      subjectDict: [],
      // subjectId: '',
      subjectName: '',
      url: {
        list: '/hr/hrDtp/list',
        listSum: 'hr/hrDtp/listSum',
        subjectList: '/hr/hrDtp/get/user/subject/list'
      },
    }
  },
  created() {
    this.getSubjectList()
  },
  methods: {
    moment,
    //根据用户获取所在项目列表
    getSubjectList() {
      getAction(this.url.subjectList, { realName: this.realName,username: this.realName })
        .then((res) => {
          if (res.success) {    
            if (res.result && res.result.length > 0) {
              this.subjectDict = res.result
              this.queryParam.subjectId = res.result[0].subjectId
              this.subjectName = res.result[0].subjectName
            } else {
              this.subjectDict = []     
              this.$set(this.queryParam,'subjectId',undefined)   
              this.subjectName = null
            }
          } else {
            this.$message.warning(res.message)
          }
          this.loadData(1)
          this.getListSum()
        })
    },
    //选择项目
    subjectChange(value) {
      const subjectItem = (this.subjectDict && this.subjectDict.length > 0) ? this.subjectDict.filter(s => s.subjectId === value) : []
      this.subjectName = subjectItem.length > 0 ? subjectItem[0].subjectName : ''
      this.loadData(1)
      this.getListSum()
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams() //查询条件
      params.realName = this.realName  
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            this.dtpData = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    //获取总份额合计
    getListSum() {
      const param = {
        username: Vue.ls.get(USER_INFO).username ? Vue.ls.get(USER_INFO).username : '',
        subjectId: this.queryParam.subjectId
      }
      getAction(this.url.listSum, param).then((res) => {
        if (res.success) {
          this.totalShare = res.result.totalShare
          this.totalEstimatePerShare = res.result.totalEstimatePerShare
          this.totalRewardAmount = res.result.totalRewardAmount
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //查看DTP份额对照配置
    searchDTPShareCompare() { 
      this.$refs.modalForm.title = 'DTP份额对照'
      this.$refs.modalForm.visible = true
    }
  },
}
</script>
<style scoped>
.search {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 5px 0 20px 0;
}

/* /deep/.ant-table-footer {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.65);
  font-size: 15px;
  border: 0 !important;
} */
/deep/.ant-table-title {
  padding: 10px 0;
}
</style>